<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="${siteurl}bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="${siteurl}plugins/FontAwesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="${siteurl}plugins/ionicons201/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="${siteurl}dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="${siteurl}dist/css/skins/_all-skins.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    [#include "/admin/common/commons.html"]

    <!-- jQuery 2.2.3 -->
    <script src="${siteurl}plugins/jQuery/jquery-2.2.3.min.js"></script>
    <!-- Bootstrap 3.3.6 -->
    <script src="${siteurl}bootstrap/js/bootstrap.min.js"></script>
    <!-- SlimScroll -->
    <script src="${siteurl}plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <!-- FastClick -->
    <script src="${siteurl}plugins/fastclick/fastclick.js"></script>
    <!-- AdminLTE App -->
    <script src="${siteurl}dist/js/adminlte.min.js"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="${siteurl}dist/js/demo.js"></script>
    <script src="${siteurl}dist/js/list.js"></script>

    <link rel="stylesheet" href="${siteurl}plugins/bootstrap-datepicker/css/bootstrap-datepicker3.css">
    <script src="${siteurl}plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="${siteurl}plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <script src="${siteurl}dist/js/knockout-3.4.2.js"></script>
    <link rel="stylesheet" href="${siteurl}plugins/sweetalert/sweetalert.css">
    <script src="${siteurl}plugins/sweetalert/sweetalert.min.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<!-- Site wrapper -->
<div class="wrapper">

    <header class="main-header">
        <!-- Header Navbar: style can be found in header.less -->
        [#include "/admin/common/nav.html"]
    </header>

    <!-- =============================================== -->

    <!-- Left side column. contains the sidebar -->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            [@user_panel /]
            <!-- search form -->
            [@sidebar_form /]
            <!-- /.search form -->
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu" data-widget="tree">
                <li class="header">主面板</li>
                [@menustag id=1]
                [#list list as item]
                [@menu item "1,2,43"]
                [/@menu]
                [/#list]
                [/@menustag]
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- =============================================== -->

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                信息列表
                <small></small>
            </h1>
        </section>
        <!-- Main content -->
        <section class="content">
            <!-- Default box -->
            <!-- /.box -->
            <div class="row">
                <div class="col-md-3">

                    <!-- Profile Image -->
                    <div class="box box-primary">
                        <div class="box-body box-profile">
                            <img class="profile-user-img img-responsive img-circle" src="../../dist/img/user4-128x128.jpg" alt="User profile picture">

                            <h3 class="profile-username text-center">${model.name!""}</h3>

                            <p class="text-muted text-center">Software Engineer</p>

                            <ul class="list-group list-group-unbordered">
                                <li class="list-group-item">
                                    <b>我的粉丝</b> <a class="pull-right">1,322</a>
                                </li>
                                <li class="list-group-item">
                                    <b>我关注的人</b> <a class="pull-right">543</a>
                                </li>
                                <li class="list-group-item">
                                    <b>我的好友</b> <a class="pull-right">13,287</a>
                                </li>
                            </ul>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->

                    <!-- About Me Box -->
                    <div class="box box-primary">
                        <div class="box-header with-border">
                            <h3 class="box-title">关于我</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <strong><i class="fa fa-book margin-r-5"></i> Education</strong>

                            <p class="text-muted">
                                B.S. in Computer Science from the University of Tennessee at Knoxville
                            </p>

                            <hr>

                            <strong><i class="fa fa-map-marker margin-r-5"></i> Location</strong>

                            <p class="text-muted">Malibu, California</p>

                            <hr>

                            <strong><i class="fa fa-pencil margin-r-5"></i> Skills</strong>

                            <p>
                                <span class="label label-danger">UI Design</span>
                                <span class="label label-success">Coding</span>
                                <span class="label label-info">Javascript</span>
                                <span class="label label-warning">PHP</span>
                                <span class="label label-primary">Node.js</span>
                            </p>

                            <hr>

                            <strong><i class="fa fa-file-text-o margin-r-5"></i> Notes</strong>

                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam fermentum enim neque.</p>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
                <div class="col-md-9">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#settings" data-toggle="tab" aria-expanded="true">个人资料</a></li>
                            <li class=""><a href="#passwordinfo" data-toggle="tab" aria-expanded="false">密码修改</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="settings">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <label for="name" class="col-sm-2 control-label">昵称</label>

                                        <div class="col-sm-10">
                                            <input class="form-control" data-bind="value:name" id="name" placeholder="昵称" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="phone" class="col-sm-2 control-label">电话</label>

                                        <div class="col-sm-10">
                                            <input class="form-control"  data-bind="value:phone" id="phone" placeholder="电话" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="email" class="col-sm-2 control-label">电子邮箱</label>

                                        <div class="col-sm-10">
                                            <input class="form-control"  data-bind="value:email" id="email" placeholder="电子邮箱" type="email">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="job" class="col-sm-2 control-label">职务</label>

                                        <div class="col-sm-10">
                                            <input class="form-control"   data-bind="value:job" id="job" placeholder="职务" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="companyName" class="col-sm-2 control-label">所在公司</label>

                                        <div class="col-sm-10">
                                            <input class="form-control"   data-bind="value:companyName"  id="companyName" placeholder="所在公司" type="text">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="introduce" class="col-sm-2 control-label">个人介绍</label>

                                        <div class="col-sm-10">
                                            <textarea name="introduce"  data-bind="value:introduce" class="form-control" id="introduce" placeholder="个人介绍"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" data-bind="click:updateProfile" class="btn btn-danger">保存</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <!-- /.tab-pane -->

                            <div class="tab-pane " id="passwordinfo">
                                <form class="form-horizontal">
                                    <div class="form-group">
                                        <label for="oldPassword" class="col-sm-2 control-label">老密码</label>

                                        <div class="col-sm-10">
                                            <input class="form-control" value=""  id="oldPassword" name="oldPassword" placeholder="老密码" type="password">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="password" class="col-sm-2 control-label">新密码</label>

                                        <div class="col-sm-10">
                                            <input class="form-control" id="password" name="password" placeholder="新密码" type="password">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button id="updatepassword" type="button" class="btn btn-danger">提交</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- /.tab-content -->
                    </div>
                    <!-- /.nav-tabs-custom -->
                </div>
                <!-- /.col -->
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    [#include "/admin/common/footer.html"]

    <!-- Control Sidebar -->
    [#include "/admin/common/aside.html"]

    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->



<script type="text/javascript">
    var QuestionModel = function(options) {
        var self = this;
        self.name=ko.observable("${(model.name)!''}");
        self.email=ko.observable("${(model.email)!''}");
        self.companyName=ko.observable("${(model.companyName)!''}");
        self.phone=ko.observable("${(model.phone)!''}");
        self.job=ko.observable("${(model.job)!''}");
        self.introduce=ko.observable("${(model.introduce)!''}");
        self.updateProfile=function () {
            var data=JSON.stringify(ko.toJS(self), null, 2);
            console.log(data);
            if(self.name()==undefined || self.name().length<=1){
                swal("请填写昵称");
                return;
            }

            $.ajax({
                type: "post",
                url: '${siteurl}admin/member/model_update_basic.htm',
                async: false, // 使用同步方式
                data: data,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(back) {
                    if(back.code!=0){
                        swal("更新个人信息失败!",back.msg, "error")
                    }else {
                        swal("更新个人信息成功!",back.msg, "success")
                    }
                } // 注意不要在此行增加逗号
            });

        }
    }
    ko.applyBindings(new QuestionModel());


    $("#updatepassword").click(function () {
        var  data={};
        data.oldPassword=$("#oldPassword").val();
        data.password=$("#password").val();

        $.post("${siteurl}admin/member/updatepassword.htm",data,function (back) {
            if(back.code!=0){
                swal("Oops!",back.msg, "error")
            }else {
                swal("Oops!",back.msg, "success")
            }
        })
    });
</script>




</body>
</html>
